{% extends 'base.html' %}
{% load paper_filters %}

{% block title %}My Papers - Research Paper Analyzer{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fas fa-list me-2"></i>My Papers
            </h2>
            <a href="{% url 'papers:upload' %}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>Upload New Paper
            </a>
        </div>

        <!-- Search and Filter -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-6">
                        <label for="search" class="form-label">Search Papers</label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search_query }}" placeholder="Search by title, authors, or content...">
                    </div>
                    <div class="col-md-4">
                        <label for="status" class="form-label">Status Filter</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
                            <option value="processing" {% if status_filter == 'processing' %}selected{% endif %}>Processing</option>
                            <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>Completed</option>
                            <option value="failed" {% if status_filter == 'failed' %}selected{% endif %}>Failed</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="fas fa-search me-1"></i>Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Papers List -->
        {% if page_obj %}
            <div class="row">
                {% for paper in page_obj %}
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="card-title">{{ paper.title|truncatechars:60 }}</h6>
                                    <span class="badge bg-{% if paper.analysis_status == 'completed' %}success{% elif paper.analysis_status == 'processing' %}warning{% elif paper.analysis_status == 'failed' %}danger{% else %}secondary{% endif %} status-badge">
                                        {{ paper.analysis_status|title }}
                                    </span>
                                </div>
                                
                                {% if paper.authors %}
                                    <p class="card-text small text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        {{ paper.authors|join:", "|truncatechars:50 }}
                                    </p>
                                {% endif %}
                                
                                {% if paper.year %}
                                    <p class="card-text small text-muted">
                                        <i class="fas fa-calendar me-1"></i>{{ paper.year }}
                                    </p>
                                {% endif %}
                                
                                <p class="card-text small text-muted">
                                    <i class="fas fa-clock me-1"></i>{{ paper.created_at|date:"M d, Y" }}
                                </p>
                                
                                {% if paper.processing_time %}
                                    <p class="card-text small text-muted">
                                        <i class="fas fa-stopwatch me-1"></i>{{ paper.processing_time|floatformat:2 }}s
                                    </p>
                                {% endif %}
                            </div>
                            <div class="card-footer">
                                <div class="btn-group w-100" role="group">
                                    <a href="{% url 'papers:qa' paper.id %}" class="btn btn-primary btn-sm">
                                        <i class="fas fa-comments me-1"></i>Q&A
                                    </a>
                                    <a href="{% url 'papers:detail' paper.id %}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-eye me-1"></i>Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
                <nav aria-label="Papers pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-double-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-double-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}

        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">No papers found</h4>
                <p class="text-muted">
                    {% if search_query or status_filter %}
                        No papers match your search criteria.
                    {% else %}
                        You haven't uploaded any papers yet.
                    {% endif %}
                </p>
                <a href="{% url 'papers:upload' %}" class="btn btn-primary">
                    <i class="fas fa-upload me-1"></i>Upload Your First Paper
                </a>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Start analysis button handler
    $('.start-analysis').click(function() {
        var paperId = $(this).data('paper-id');
        var button = $(this);
        
        $.ajax({
            url: '/papers/' + paperId + '/start-analysis/',
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            },
            success: function(response) {
                if (response.status === 'success') {
                    button.removeClass('btn-outline-warning').addClass('btn-outline-info')
                        .html('<i class="fas fa-spinner fa-spin me-1"></i>Processing');
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                }
            },
            error: function() {
                alert('Failed to start analysis. Please try again.');
            }
        });
    });
});
</script>
{% endblock %} 